<template>
	<div class="statusbar">
		<div class="left">
			<statusbar-left />
		</div>
		<div class="right">
			<statusbar-right />
		</div>
	</div>
</template>

<script setup lang="ts">
import statusbarLeft from './left/index.vue';
import statusbarRight from './right/index.vue';
</script>

<style scoped lang="scss">
.statusbar {
	height: 100%;
	display: flex;
	background-color: var(--statusbar-bg-color);
	z-index: 99;
	position: relative;
	--side-padding: 2px;
	> * {
		height: 100%;
	}
	> .left {
		flex-grow: 1;
		padding-left: var(--side-padding);
	}
	> .right {
		padding-right: var(--side-padding);
	}
}
</style>
